<template>
  <view class="mgt1" v-if="dataList.length > 0">
    <tm-sheet :margin="[0]" :padding="[32,20]"  v-for="(item,index) in dataList" :key="index">
      <view class="flex">
        <view class="flex flex-sub" @click="goMenu(item,'menu')">
          <view class="icon-img"  >
            <img :src="item.icon" class="icon-img"/>
          </view>
          <view class="m-l-15 flex-list">
            <view class="flex title-flex">
              <view class="wd150">
                <tm-text _class="text-weight-b m-b-3" :font-size="32" :label="item.label"  ></tm-text>
              </view>
              <tm-tag
                :shadow="0"
                :margin="[10, 10]"
                font-color="#0052D9"
                color="#F2F3FF"
                size="xs"
                :label="item.itemType"
                v-show="item.itemType"
              ></tm-tag>
            </view>
            <tm-text
              :font-size="24"
              color="grey"
              _class="text-overflow-1"
              :label="item.remark"
              v-show="item.remark"
            ></tm-text>
          </view>
        </view>

        <view class="rg-time"  @click="goDetail(item,'menuDetail')" v-show="item.isShow">
          <tm-icon :font-size="28" color="#000000" name="tmicon-info-circle"></tm-icon>
        </view>
      </view>
    </tm-sheet>
  </view>

  <tm-sheet v-else :margin="[0]">
    <tm-result :showBtn="false" subTitle=" " title="暂无数据"></tm-result>
  </tm-sheet>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
type Props = {
  setList: any[]
}
const props = defineProps<Props>()
const dataList = computed(() => {
  const array: any[] = []
  props.setList.forEach((item) => {
    if(!item.icon){
      switch(item.itemType){
        case '目录' :
          item.icon = '/static/base/folder-fill.png'
          break;
        case '单位' :
          item.icon = '/static/base/office.png'
          break;
        case  '人员':
          item.icon = '/static/members.png'
          break;
        case '群组':
          item.icon = '/static/groups.png'
          break;
        case '部门':
          item.icon = '/static/department.png'
          break;
        case '组织群':
          item.icon = '/static/org-group.png'
          break;
        case '存储资源':
          item.icon = '/static/files.png'
          break;
        default:
          item.icon = '/static/base/user-tie.png'
          break
      }
    }
    array.push(item)
  })
  return array
})
const emit = defineEmits(['btnClick'])
const goMenu = (item: any,type: any) => {
  if(item){
    emit('btnClick', item,type)
  }
}
const goDetail = (item: any,type: any) => {
  if(item){
    emit('btnClick', item,type)
  }
}
</script>

<style lang="scss">
  @import '../../../common/style/global.scss';
  .icon-img{
    width: 48px;
    height: 48px;
    border-radius: 4px;
  }
  .flex-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
  }
  .title-flex{
    align-items: center;
  }
  .rg-time{
    display: flex;
    align-items: center;
  }
  .flex-sub{
    flex: 1;
  }
  .wd150{
    max-width: 220px;
  }
</style>